<template>
  <a-card
    :bordered="false"
    class="area-layout"
  >
    <template slot="title">
      <slot name="title" v-if="$slots['title']"></slot>
      <span v-else>{{$route.meta.title}}</span>
    </template>
    <section class="area-layout-container">
      <div class="area-container" :class="{'hidden': collapsed}">
        <div class="operate">
          <a-icon type="double-left" v-if="!collapsed" @click="collapsed = true" title="折叠行政区划" />
          <a-icon type="double-right" v-else @click="collapsed = false" title="展开行政区划" />
        </div>
        <AreaTree
          v-if="currentProject.area_info.length"
          class="area-tree"
          :defaultTreeNode="currentProject.area_info"
          @click="handlerTreeSelect"
        />
      </div>
      <section class="member-list">
        <slot :currentAreaId="currentAreaId" :currentAreaName="currentAreaName"></slot>
      </section>
    </section>
  </a-card>

</template>

<script>
import { areaServices } from '@/common/services'
import AreaTree from '@/components/src/AreaTree'
import { userModule } from '@/store/modules/user'

export default {
  name: 'AreaLayout',
  components: {
    AreaTree
  },
  props: {
    url: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      data: [],
      currentAreaId: '',
      currentAreaName: '',
      collapsed: false
    }
  },
  computed: {
    currentProject () {
      return userModule.currentProject
    }
  },
  mounted () {
    console.log('slot =>', this.$slots)
    console.log('currentProject.area_info =>', this.currentProject.area_info)
  },
  methods: {
    handlerTreeSelect (data) {
      this.currentAreaId = data.s_a_id
      this.currentAreaName = data.s_a_nam_all
      this.$emit('TreeSelect', data)
      if (this.url) {
        this.$router.push({
          path: this.url + '/' + data.s_a_id,
        })
        return
      }
    }
  }
}
</script>

<style lang="less" scoped>
.area-layout-container {
  display: flex;
  height: 100%;
  .area-tree {
    width: 100%;
    height: 100%;
    padding-right: 20px;
    overflow-y: scroll;
    background-color: #fff;
    border-right: 2px solid #ddd;
    margin-right: 10px;
  }
  .area-container {
    // width: 200px;
    flex: none;
    min-width: 200px;
    position: relative;
  }
  .hidden {
    width: 50px;
    min-width: 50px;
    padding: 0;
    border-right: none;
    .area-tree {
      padding-right: 0;
      border-right: none;
      background-color: #eee;
    }
  }
  .operate {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 33;
    font-size: 28px;
    color: #999;
    background-color: #fff;
  }
}
.area-layout > {
  /deep/ .ant-card-body {
    height: calc(100vh - 128px);
    padding: 10px;
    overflow: hidden;
  }
}
.member-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: auto;
  overflow-y: scroll;
}
</style>
